<template>
	<!-- 弹出层 -->
	<transition name="fade" mode="out-in">
		<Top-Page class="">
			<template v-if="overlay">
				<view
					v-show="show"
					:class="['popup-overlay', overlayClass]"
					@click.stop="changeShow"
				></view>
			</template>
			<view
				v-show="show"
				:class="setClass()"
				:style="[top && { top: top + 'px' }]"
			>
				<view class="popup-closeable" v-if="closeable" @click.stop="changeShow"
					>×</view
				>
				<slot><view>内容</view></slot>
			</view>
		</Top-Page>
	</transition>
</template>

<script>
	export default {
		name: "Props",
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false,
			},
			overlay: {
				type: Boolean,
				default: true,
			},
			top: {
				type: Number,
				default: 0,
			},
			overlayClass: {
				type: String,
				default: "",
			},
			round: {
				type: Boolean,
				default: false,
			},
			closeable: {
				type: Boolean,
				default: false,
			},
			class: {
				type: String,
				default: "",
			},
			position: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				className: this.class,
			};
		},
		mounted() {},
		methods: {
			changeShow() {
				this.$emit("update:show", false);
			},
			setClass() {
				let cla = ["popup-box"];
				cla.push(`popup--${this.position || "center"}`);

				this.className && cla.push(this.className);

				this.round && cla.push("popup--round");

				return cla;
			},
		},
	};
</script>

<style lang="scss">
	.popup-overlay {
		position: fixed;
		z-index: 203;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.popup-overlay-2 {
		background-color: rgba(0, 0, 0, 0);
	}

	.popup-box {
		position: fixed;
		z-index: 204;
		max-height: 100vh;
		overflow-y: auto;
		background: #fff;
		transition: transform 0.3s;
	}

	.props-content {
		width: 100;
	}

	.popup--center {
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}

	.popup--round {
		border-radius: 10rpx;
	}

	.popup--bottom.popup--round {
		border-radius: 10rpx 10rpx 0 0;
	}

	.popup--bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		min-height: 100rpx;
	}

	.popup--top {
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100rpx;
	}

	.popup--top.popup--round {
		border-radius: 0 0 10rpx 10rpx;
	}

	.popup--left {
		top: 0;
		left: 0;
		width: 30%;
		height: 100vh;
	}

	.popup--right {
		top: 0;
		right: 0;
		width: 30%;
		height: 100vh;
	}

	//右上角的关闭按钮
	.popup-closeable {
		font-size: calc(var(--amplified_base) * 40rpx);
		color: #999;
		text-align: center;
		width: 1em;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.fade-enter-to,
	.fade-leave {
		opacity: 1;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 2s;
	}
</style>
